<template>
	<view class="content-class">
		<u-row class="user-info">
			<u-row>
				<image :src="icon"></image>
				<view class="info">
					IVE-张元英
					<u-row class="span">
						<u-row>
							<u-image style="margin-right:4px" width="10px" height="10px" src="../../static/images/measuring/head.png"></u-image>
							右手
						</u-row>
						<u-row>
							<u-image style="margin-right:4px" width="10px" height="10px" src="../../static/images/measuring/heart.png"></u-image>
							2025-03-03 06:32:12
						</u-row>
					</u-row>
				</view>
			</u-row>
		</u-row>

		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">
					<u-row>
						<u-image style="margin-right:4px" width="16px" height="16px" src="../../static/images/report/tzbz.png"></u-image>
						体质辩证
					</u-row>
					<u-icon color="#fff" name="question-circle" @click="skipBodyConstitution"></u-icon>
				</u-row>
				<u-image style="margin-top:12px" width="310px" height="252px" src="../../static/images/report/tzbz-1.png"></u-image>
				<view class="report-tip">
					此次测量的体质是您的瞬间体质，如果想要更加了解您的体质，请查看周报告、月报告
				</view>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">
					<u-row>
						<u-image style="margin-right:4px" width="16px" height="16px" src="../../static/images/report/tzbz.png"></u-image>
						脏腑辩证
					</u-row>
					<u-icon color="#fff" name="question-circle"></u-icon>
				</u-row>
				<view class="fxpg-block">
					<view style="margin-bottom: 12px;border-radius: 6px;color:#FFD8BB;justify-content: center;padding: 12px;width: calc(50% - 30px);" class="fxpg-item" v-for="(i,iIndex) in zfbzData" :key="iIndex">
						{{i.title}}
						<span :style="{border:`1px solid ${i.color}`,color:i.color}">{{i.tag}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">
					<u-row>
						<u-image style="margin-right:4px" width="16px" height="16px" src="../../static/images/report/llzs.png"></u-image>
						理疗指数
					</u-row>
					<u-icon color="#fff" name="question-circle"></u-icon>
				</u-row>
				<u-row style="margin-top: 12px;">
					<view class="yy-zs">
						<view class="yin-zs">
							阴指数:
							<span>80</span>
						</view>
						<view class="yang-zs">
							阴指数:
							<span>80</span>
						</view>
					</view>
					<view class="split-line">
						100
						<view class="split-num" v-for="i in splitNumber" :key="i.title">
							<view>{{i.num}}</view>
							<view class="split-text">{{i.text}}</view>
						</view>
					</view>
					<u-image style="margin-right:4px;position: absolute;left:70px" width="184px" height="184px" src="../../static/images/report/llzs-circle.png"></u-image>

				</u-row>

				<u-row class="yy-progress">
					<span>湿气指数</span>
					<u-line-progress activeColor="#FFD8BB" inactiveColor="#1b1b1b" height="12" :percentage="30">
						<span class="u-line-text" style="background:#EE9060 ;">
							轻度
						</span>
					</u-line-progress>
				</u-row>
				<u-row style="margin-left: 50px">
					<view v-for="i in 11" :key="i" style="flex: 1;font-size: 10px;color:#999">
						<view style="margin-left: 50%;">{{i - 1}}</view>
					</view>
				</u-row>
				<u-row class="yy-progress">
					<span>血瘀指数</span>
					<u-line-progress activeColor="#54D7A5" inactiveColor="#1b1b1b" height="12" :percentage="80">
						<span class="u-line-text" style="background:#02A166 ;">
							重度
						</span>
					</u-line-progress>
				</u-row>
				<u-row style="margin-left: 50px">
					<view v-for="i in 11" :key="i" style="flex: 1;font-size: 10px;color:#999">
						<view style="margin-left: 50%;">{{i - 1}}</view>
					</view>
				</u-row>
				<view class="report-tip">
					<u-row>1.阴阳指数满分各100，数值越低表示越虚。</u-row>
					<u-row>2.湿气指数、血瘀指数均为病理指数，数值越大,则表示健康程度越差。</u-row>
				</view>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">
					<u-row>
						<u-image style="margin-right:4px" width="16px" height="16px" src="../../static/images/report/jbmb.png"></u-image>
						局部脉搏波形图
					</u-row>
					<u-icon color="#fff" name="question-circle"></u-icon>
				</u-row>
				<charts v-if="!loading" :option="option1" id="TCMReport1" :height="191"></charts>
			</view>
		</view>
		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">
					<u-row>
						<u-image style="margin-right:4px" width="16px" height="16px" src="../../static/images/report/jlzzt.png"></u-image>
						经络柱状图
					</u-row>
					<u-icon color="#fff" name="question-circle"></u-icon>
				</u-row>
				<charts v-if="!loading" :option="option2" id="TCMReport2" :height="191"></charts>
			</view>
		</view>

		<view class="jkzs-border">
			<view class="jkzs">
				<u-row justify="space-between">
					<u-row>
						<u-image style="margin-right:4px" width="16px" height="16px" src="../../static/images/report/llzs.png"></u-image>
						调理建议
					</u-row>
					<u-icon color="#fff" name="question-circle"></u-icon>
				</u-row>
				<u-row style="margin-top: 12px;background-color: #1b1b1b;border-radius: 6px;padding: 5px 5px;" justify="space-between" v-for="(i,iIndex) in tljyData" :key="iIndex">
					<u-row style="font-weight: normal;color:#FFD8BB;font-size:12px">
						<u-image style="margin-right:4px" width="56px" height="56px" :src="i.icon"></u-image>
						<view style="display: flex;flex-direction: column;">
							<u-row>{{i.title}}</u-row>
							<u-row style="color:#fff;margin-top: 6px;">{{i.tag}}</u-row>
						</view>
					</u-row>
					<u-image style="margin-left:10px" width="20px" height="20px" src="../../static/images/measuring/arrow.png"></u-image>
				</u-row>
			</view>
		</view>
		<view class="report-tip">
			本APP产生的测量报告仅供健康评估参考，不能作为医疗诊断和医疗建议：在做医疗决定之前，请向专业医生寻求诊断与建议；<span>查看参考信息 </span>
		</view>


	</view>
</template>

<script>
	import {
		getRandomNumber
	} from "@/utils/index.js"
	import {
		mapGetters
	} from "vuex"
	export default {
		data() {
			return {
				loading: false,
				option1: {
					grid: {
						top: "middle",
						left: "20px",
						right: "10px",
						height: "80%",
						top: '30px',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisLine: {
							show: false,
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
					},
					yAxis: {
						type: 'value',
						max: 70,
						min: 30,
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "rgba(255,255,255,0.2)",
							},
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: false,
						},
					},
					series: [{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line',
						symbolSize: 0,
						lineStyle: {
							width: 1,
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#02A166' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFD8BB' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
					}]
				},
				option2: {
					grid: {
						top: "middle",
						left: "20px",
						right: "10px",
						height: "80%",
						top: '30px',
						containLabel: true,
					},
					//x轴
					xAxis: {
						axisLine: {
							show: false
						},
						axisLabel: {
							show: false
						},
						//刻度线
						axisTick: {
							show: false,
						},
						//坐标轴显示值
						data: ['心包经', '肝经', '肾经', '脾经', '肺经', '胃经', '胆经', '膀胱经'],
					},
					//y轴
					yAxis: {
						axisLabel: {
							show: false
						},
						//坐标轴线
						axisLine: {
							show: false,
						},
						//刻度线
						axisTick: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: "dashed",
								color: "rgba(255,255,255,0.2)",
							},
						},
					},
					series: [{
						type: "bar",
						barMaxWidth: 25,
						// stack: 'same',
						barGap: '-100%', // 使第二个系列与第一个完全重叠
						data: [-5, 5, 10, 50, 10, 5, -20, -25].map((item) => {
							return {
								value: item,
								itemStyle: { // 每个柱子单独设置颜色
									color: item > 0 ? "#EE9060" : "#02A166",
								},
								label: {
									show: true, //开启显示
									position: item > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
									formatter: "{c}%", //单位
									textStyle: {
										color: "#fff",
										fontSize: "8px",
									},
								},
							};
						}),
					}, {
						type: "bar",
						barMaxWidth: 25,
						data: [-5, 5, 10, 50, 10, 5, -20, -25].map((item) => {
							return {
								value: item,
								itemStyle: { // 每个柱子单独设置颜色
									color: item > 0 ? "#EE9060" : "#02A166",
								},
								label: {
									show: true, //开启显示
									position: item > 0 ? "bottom" : "top", //判断正负值上方显示还是下方
									formatter: '{b}',
									textStyle: {
										color: "#fff",
										fontSize: "8px",
									},
									backgroundColor: '#1B1B1B',
									padding: [2, 7],
									borderRadius: 4
								},
							};
						}),
					}],
				},
				splitNumber: [{
					num: '75',
					text: '高'
				}, {
					num: '50',
					text: '中'
				}, {
					num: '25',
					text: '低'
				}, {
					num: '0',
					text: '极低'
				}],
				icon: require("../../static/images/homePage/tx.png"),
				tljyData: [{
						"title": "食疗建议",
						"tag": "翡翠虾滑腿竹笋、芹菜花生米、...",
						"icon": require("../../static/images/report/sljy.png"),
					},
					{
						"title": "运动建议",
						"tag": "扩胸调气、摇头摆尾法...",
						"icon": require("../../static/images/report/ydjy.png"),
					},
					{
						"title": "中药建议",
						"tag": "心元胶囊、血府逐瘀汤...",
						"icon": require("../../static/images/report/zyjy.png"),
					},
					{
						"title": "理疗建议",
						"tag": "脾俞穴、胃俞穴...",
						"icon": require("../../static/images/report/lljy.png"),
					}
				],
				zfbzData: [{
					"title": "心血瘀阻",
				}, {
					"title": "肝血亏虚",
				}, {
					"title": "胃阴虚",
				}, ],
			};
		},
		onLoad() {
			this.loading = true
			this.option1.series[0].data = getRandomNumber(45, 65, 20)
			this.option1.xAxis.data = this.option1.series[0].data.map((_, index) => `T${index}`)
			this.loading = false
		},
		methods: {
			skipBodyConstitution() {
				uni.navigateTo({
					url: "/pages/BodyConstitution/BodyConstitution"
				})
			}
		},
		computed: {
			...mapGetters(["statusBarHeight"]),
		},
	};
</script>

<style scoped lang="scss">
	.content-class {

		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 40px;

		.report-tip {
			margin-top: 12px;
			font-weight: 500;
			font-size: 12px;
			color: #999999;

			span {
				color: #FFD8BB;
			}
		}

		.jkzs-border {
			border-radius: 12px;
			margin-bottom: 12px;
			overflow: hidden;
			position: relative;

			.jkzs {
				border: 1px solid;
				border-image: linear-gradient(225deg, rgba(112, 108, 99, 1), rgba(81, 69, 51, 1), rgba(255, 219, 180, 1), rgba(133, 113, 81, 1), rgba(90, 92, 80, 1)) 1 1;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				padding: 16px;
				width: 100%;
				min-height: 113px;
				background: #0B0F12;
				box-shadow: inset 0px 0px 12px 6px #2C281F;
				font-weight: bold;
				font-size: 14px;

			}

		}

		.yy-progress {
			margin: 12px 0px;
			font-size: 12px;
			gap: 10px;
			display: flex;
			flex-direction: row;


			::v-deep .u-line-progress {
				overflow: unset;

			}

			.u-line-text {
				font-size: 10px;
				position: absolute;
				padding: 0px 5px;
				height: 18px;
				line-height: 18px;
				border-radius: 10px;
				top: 50%;
				transform: translateY(-50%);
				font-weight: normal;
			}

		}

		.split-line .split-num:first-child {
			border-top: 1px dashed rgba(255, 255, 255, 0.2);
		}

		.split-line {
			width: calc(100% - 70px);
			align-items: flex-end;
			display: flex;
			flex-direction: column;
			height: 200px;
			margin-bottom: 10px;
			font-size: 10px;
			color: #999;

			.split-num {
				position: relative;
				align-items: flex-end;
				display: flex;
				justify-content: flex-end;
				flex: 1;
				width: 60%;
				border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
			}

			.split-text {
				position: absolute;
				right: 30px;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.yy-zs {
			font-size: 12px;
			margin-top: 20px;
			margin-right: 12px;

			.yin-zs {
				display: flex;
				color: #FFD8BB;
				flex-direction: column;
			}

			.yang-zs {
				display: flex;
				flex-direction: column;
				color: #54D7A5;
				margin-top: 24px;
			}

			span {
				font-weight: bold;
				font-size: 30px;
			}
		}

		.fxpg-block .fxpg-item:nth-child(odd) {
			margin-right: 10px;
		}


		.fxpg-block {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 12px;
			border-radius: 6px;
			overflow: hidden;
			font-size: 13px;
			font-weight: normal;

			.fxpg-item {
				display: inline-flex;
				justify-content: space-between;
				width: calc(50% - 25px);
				padding: 6px 10px;
				background-color: #1B1B1B;
				align-items: center;

				span {
					padding: 3px 8px;
					border-radius: 6px;
					white-space: nowrap
				}
			}
		}


		.user-info {
			padding: 20px 0px 10px 0px;
			font-size: 18px;

			image {
				width: 58px;
				height: 58px;
				margin-right: 8px;
			}

			.info {
				display: flex;
				flex-direction: column;

				.span {
					margin-top: 6px;
					font-size: 12px;
					color: #999;
					gap: 15px
				}
			}

			span {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				margin-right: 6px;
			}
		}



	}
</style>